<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="div1">
        <p id="p1">这是一个段落。</p>
        <p id="p2">这是另外一个段落。</p>
    </div>

    <script>
        var str = document.createTextNode("替换了段落");
        var p = document.createElement('p');
        p.appendChild(str);

        var parent = document.getElementById('div1');
        var child = document.getElementById('p1');

        parent.replaceChild(p, child);

    </script> 

    <script>
        var str = document.createTextNode("段头新增的段落");
        var p = document.createElement('p');
        p.appendChild(str);

        var parent = document.getElementById('div1');
        var child = document.getElementById('p1');

        parent.insertBefore(p,child);

    </script>

    <script>
        var str = document.createTextNode("段尾新增的段落");
        var p = document.createElement('p');
        p.appendChild(str);

        var parent = document.getElementById('div1');
        var child = document.getElementById('p1');
        parent.appendChild(str,child);

    </script>

</body>

</html>